<!--时间选择器-->
<template>
  <van-popup :show="props.modelValue" v-bind="{...$attrs,closeable:true,position:$attrs.position || 'bottom'}"
             @click-close-icon="clickCloseIcon">
    <div class="main">
      <div class="text-center f-18 text-bold">{{ title }}</div>
      <van-time-picker ref="timePickerRef" :show-toolbar="false" @confirm="confirm">
        <template #columns-bottom>
          <div class="footer">
            <van-button block round @click="reset">重置</van-button>
            <van-button type="primary" block round @click="submit">确认</van-button>
          </div>
        </template>
      </van-time-picker>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import {ref} from "vue";

const props = defineProps<{
  modelValue: boolean
  title?: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', show: boolean): void
  (e: 'update:value', value: any): void
}>()

const timePickerRef = ref(null)

// 点击关闭按钮
const clickCloseIcon = () => {
  emit('update:modelValue', false)
}

const closeOverlay = () => {

}

// 重置
const reset = () => {
  emit('update:value', '')
  emit('update:modelValue', false)
}

// 确认
const submit = () => {
  timePickerRef.value?.confirm();
}

const confirm = ({selectedValues, selectedOptions, selectedIndexes}: any) => {
  emit('update:value', selectedValues.join(':'))
  emit('update:modelValue', false)
}
</script>

<style scoped>
.main {
  width: 100%;
  padding-top: 20px;
}

.footer {
  width: 100%;
  background-color: #fff;
  padding: 10px 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

:deep(.van-button) {
  margin: 0 5px;
}
</style>